<template>
  <div>
    <div>
      <div>
        <homework-header :item="item"
                         :if-write="ifWrite"
                         :finished="finished"
                         :homework="homework"/>
      </div>

      <div class="content-container">
        <div class="teadetail-zone0">

          <div class="course-body clearfix content-container">

            <!--  导航菜单-->
            <div class="course-nav-menu pull-left">
              <div class="course-cover"></div>
              <div class="course-nav">
                <a class="tab-link tab-units"
                   :class="{active: isActive === 1}"
                   @click="change(1)">
                  <i class="iconfont icon-danyuan pull-left"
                     :class="{iactive: isActive === 1}"></i>
                  <span>工作台</span>
                </a>
                <div class="divider tab-units"></div>
                <a class="tab-link tab-units"
                   :class="{active: isActive === 2}"
                   @click="change(2)">
                  <i class="iconfont icon-gonggaoguanli pull-left"
                     :class="{iactive: isActive === 2}"></i>
                  <span>数据总览详细</span>
                </a>
                <div class="divider tab-units"></div>
                <a class="tab-link tab-units"
                   :class="{active: isActive === 3}"
                   @click="change(3)">
                  <i class="iconfont icon-gonggaoguanli pull-left"
                     :class="{iactive: isActive === 3}"></i>
                  <span>作业批阅详情</span>
                </a>
                <div class="divider tab-units"></div>
                <a class="tab-link tab-units"
                   :class="{active: isActive === 4}"
                   @click="change(4)">
                  <i class="iconfont icon-gonggaoguanli pull-left"
                     :class="{iactive: isActive === 4}"></i>
                  <span>今日数据详情</span>
                </a>
                <div class="divider tab-units"></div>

              </div>
            </div>
            <div class="course-content-area pull-left">
              <div class="full-height">
                <div class="ko-view">
                  <!--  面包屑标题-->
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item class="breadcrumb-item-title">首页</el-breadcrumb-item>
                    <el-breadcrumb-item
                        class="breadcrumb-item"
                        v-show="isActive === 1">工作台
                    </el-breadcrumb-item>
                    <el-breadcrumb-item
                        class="breadcrumb-item"
                        v-show="isActive === 2">数据总览详细
                    </el-breadcrumb-item>
                    <el-breadcrumb-item
                        class="breadcrumb-item"
                        v-show="isActive === 3">作业批阅详情
                    </el-breadcrumb-item>
                    <el-breadcrumb-item
                        class="breadcrumb-item"
                        v-show="isActive === 4">今日数据详情
                    </el-breadcrumb-item>
                  </el-breadcrumb>

                  <div class="app-main" v-loading="loading">
                      <div class="divTmp" v-show="loading"></div>
                      <div v-show="!loading">
                        <!--  工作台-->
                        <div id="workbench"
                             v-show="isActive === 1 && !showAddHomeworkPage && !showViewHomeworkPage"
                             class="workbench">
                          <!--  提交人数 未提交人数 共享作业  截止时间-->
                          <div class="workbench1">
                            <div class="title workbench-style" style="height: 25px">
                              <div class="title-item pull-left">
                                数据总览：
                              </div>
                              <div class="title-item pull-right"
                                   style="text-align: right;margin-right: 20px">
                                <a class="change" @click="change(2)">查看详细数据 ></a>
                              </div>
                            </div>
                            <div class="workbench-style">
                              <div class="workbench-item">
                                <div class="pull-left tip">
                                  <span>提交人数：</span>
                                </div>
                                <div class="pull-right numbers">
                                  <span>{{ homework.completed }}</span>
                                </div>
                              </div>
                              <div class="workbench-item">
                                <div class="pull-left tip">
                                  <span>未提交人数：</span>
                                </div>
                                <div class="pull-right numbers">
                                  <span>{{ homework.total - homework.completed }}</span>
                                </div>
                              </div>
                              <div class="workbench-item">
                                <div class="pull-left tip">
                                  <span>共享作业：</span>
                                </div>
                                <div class="pull-right numbers">
                                  <span>{{ workbenchInfo.shared }}</span>
                                </div>
                              </div>
                              <div class="workbench-item">
                                <div class="pull-left tip">
                                  <span>截止时间：</span>
                                </div>
                                <div class="pull-right numbers">
                                  <span style="font-size: 18px;color: #ea5947">{{ homework.endTime }}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="workbench2">
                            <!--                      已批阅人数    未批阅人数-->
                            <div class="workbench-style2">
                              <div class="title workbench-style3" style="height: 25px">
                                <div class="title-item pull-left">
                                  批阅管理：
                                </div>
                                <div class="title-item pull-right change"
                                     style="text-align: right;margin-right: 20px">
                                  <a class="change" @click="change(3)">查看批阅详情 ></a>
                                </div>
                              </div>
                              <div class="workbench-style3">
                                <div class="workbench-item">
                                  <div class="pull-right numbers2">
                                    <span style="color: #409EFF">{{ workbenchInfo.marked }}人</span>
                                  </div>
                                  <div class="pull-left tip2">
                                    <span>已批阅</span>
                                  </div>
                                </div>
                                <div id="marking" class="workbench-item" @click="toGetHomeworkBy(1)">
                                  <div class="pull-right numbers2">
                                    <span style="color: #ea5947">{{ workbenchInfo.marking }}人</span>
                                  </div>
                                  <div class="pull-left tip2">
                                    <span>待批阅</span>
                                  </div>
                                </div>
                              </div>
                              <!--                      今日    今日提交人数-->
                            </div>
                            <div class="workbench-style3">
                              <div class="title workbench-style3" style="height: 25px">
                                <div class="title-item pull-left">
                                  今日数据：
                                </div>
                                <div class="title-item pull-right change"
                                     style="text-align: right;margin-right: 20px">
                                  <a class="change" @click="change(4)">查看更多 ></a>
                                </div>
                              </div>
                              <div class="workbench-style3">
                                <div class="workbench-item">
                                  <div class="pull-right numbers2">
                                    <span>6份</span>
                                  </div>
                                  <div class="pull-left tip2">
                                    <span>共享作业</span>
                                  </div>
                                </div>
                                <div class="workbench-item">
                                  <div class="pull-right numbers2">
                                    <span>{{ workbenchInfo.submitToday }}人</span>
                                  </div>
                                  <div class="pull-left tip2">
                                    <span>提交</span>
                                  </div>
                                </div>
                              </div>

                            </div>
                            <div style="clear: both"></div>

                          </div>

                          <div class="homework-stu-manage">
                            <!--  标题-> 作业完成情况-->
                            <div class="title workbench-style"
                                 style="height: 42px;margin-left: 0;width: 1010px">
                              <div class="title-item pull-left"
                                   style="width: 60%">
                                <span>作业完成情况：</span>
                                <button class="title-button button add-homework"
                                        @click="toGetHomeworkBy(3)">所有学生
                                </button>
                                <button class="title-button button add-homework"
                                        @click="toGetHomeworkBy(0)">未提交
                                </button>
                                <button class="title-button button add-homework"
                                        @click="toGetHomeworkBy(1)">未批阅
                                </button>
                                <button class="title-button button add-homework"
                                        @click="toGetHomeworkBy(2)">已批阅
                                </button>

                              </div>
                              <div class="title-item pull-right"
                                   style="text-align: right;width: 40%">
                                <button class="button button-red-hollow add-homework"
                                        @click="">提醒一下
                                </button>
                                <button class="button button-red-hollow add-homework"
                                        @click="toHomeworkPage(2)">修改作业
                                </button>
                              </div>
                            </div>
                            <!--  作业完成情况-->
                            <el-table
                                :data="tableData"
                                class="table-groups table-homework student"
                                style="width: 100%;">
                              <el-table-column
                                  prop="label"
                                  align="left"
                                  width="130">
                                <template slot="header" slot-scope="scope">
                                  <span>索引 &nbsp;&nbsp;</span>
                                  <span style=" font-size: 12px;
                                              color: #969696;
                                              font-weight: 400;">总计{{ pagination.counts }}个</span>
                                </template>
                                <template slot-scope="scope">
                                  <div class="td item-name">
                                    <span style="color:#000;">{{ scope.$index + 1 }}</span>
                                  </div>
                                </template>
                              </el-table-column>
                              <el-table-column
                                  prop="studentId"
                                  label="学号"
                                  width="200">
                              </el-table-column>
                              <el-table-column
                                  prop="name"
                                  label="姓名"
                                  width="80">
                              </el-table-column>
                              <el-table-column
                                  label="提交时间"
                                  width="270">
                                <template slot-scope="scope">
                                  <div>{{ scope.row.createTime === null ? "---" : scope.row.createTime }}</div>
                                </template>
                              </el-table-column>
                              <el-table-column
                                  prop="status"
                                  label="状态"
                                  width="110">
                                <template slot-scope="scope">
                                  <div v-show="scope.row.status === 0">未提交</div>
                                  <div v-show="scope.row.status === 1">待批阅</div>
                                  <div v-show="scope.row.status === 2">已批阅&nbsp;{{ scope.row.score }}</div>
                                </template>
                              </el-table-column>
                              <el-table-column
                                  label="操作"
                                  align="center"
                                  width="220">
                                <template slot-scope="scope">
                                  <button class="table-button button button-red-hollow"
                                          v-show="scope.row.createTime !== null"
                                          @click="view(scope.row.studentId,scope.row.name)">查看/批阅
                                  </button>
                                  <button class="table-button button button-red-hollow"
                                          v-show="scope.row.createTime === null"
                                          @click="">提醒一下
                                  </button>
                                </template>
                              </el-table-column>
                            </el-table>
                            <div class="pagination-container">
                              <el-pagination
                                  class="course-student-pagination pagination-wrap stu-pagination"
                                  @size-change="handleSizeChange"
                                  @current-change="handleCurrentChange"
                                  :current-page.sync="pagination.page"
                                  :page-size="pagination.pageSize"
                                  layout="prev,pager,next, jumper"
                                  :total="pagination.counts">
                              </el-pagination>
                            </div>
                          </div>
                        </div>
                        <!--  数据总览详情-->
                        <div v-if="isActive === 2 && !showAddHomeworkPage && !showViewHomeworkPage">

                          <homework-submit :data="homeworkSubmitData"/>
                          <homework-shared :data="homeworkSharedData"/>
                        </div>
                        <!--  作业批阅详情-->
                        <div v-if="isActive === 3 && !showAddHomeworkPage && !showViewHomeworkPage">
                          <homework-mark :data="homeworkMarkData"/>
                          <homework-shared :data="homeworkSharedData"/>
                        </div>
                        <!--  今日数据详情-->
                        <div v-if="isActive === 4 && !showAddHomeworkPage && !showViewHomeworkPage">
                          <today-submit :data="todaySubmitData"/>
                        </div>
                        <!--  修改作业详情 -->
                        <div class="container view-body" v-show="showAddHomeworkPage && !showViewHomeworkPage">
                          <el-form
                              name="ruleForm"
                              :model="ruleForm"
                              status-icon
                              :rules="rules"
                              ref="ruleForm"
                              class="rule-form"
                          >
                            <el-button @click="showAddHomeworkPage = false">返回</el-button>
                            <div class="page-tip">
                              <div class="tip-content">
                                <p>作业名称不可修改</p>
                                <p>请将作业内容详情填写清楚</p>
                              </div>
                            </div>

                            <!--          作业名称-->
                            <el-form-item prop="name" class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <span>作业名称：{{ ruleForm.name }}</span>
                              </div>
                            </el-form-item>

                            <!--          开始时间和截止时间-->
                            <el-form-item prop="time" class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <el-date-picker
                                    v-model="ruleForm.startTime"
                                    type="datetime"
                                    style="width: 45%;float: left"
                                    placeholder="选择日期时间"
                                    value-format="yyyy-MM-dd hh:mm:ss"
                                    default-time="12:00:00">
                                </el-date-picker>
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="datetime"
                                    style="width: 45%;float: left;margin-left: 10%"
                                    placeholder="选择日期时间"
                                    value-format="yyyy-MM-dd hh:mm:ss"
                                    default-time="12:00:00">
                                </el-date-picker>
                              </div>
                            </el-form-item>

                            <el-form-item prop="evaluation" class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <span>选择评价方式</span>
                                <el-radio-group v-model="ruleForm.evaluation">
                                  <el-radio label="teacher">老师评价</el-radio>
                                  <el-radio label="student">学生评价</el-radio>
                                </el-radio-group>
                              </div>
                            </el-form-item>

                            <el-form-item prop="announced" class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <span>是否公布成绩</span>
                                <el-radio-group v-model="ruleForm.ifAnnounced">
                                  <el-radio :label="1">是</el-radio>
                                  <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                              </div>
                            </el-form-item>
                            <el-form-item prop="upload" class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <span>是否允许上传附件</span>
                                <el-radio-group v-model="ruleForm.ifUpload">
                                  <el-radio :label="1">是</el-radio>
                                  <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                              </div>
                            </el-form-item>
                            <el-form-item prop="copy" class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <span>是否允许复制粘贴</span>
                                <el-radio-group v-model="ruleForm.ifCopy">
                                  <el-radio :label="1">是</el-radio>
                                  <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                              </div>
                            </el-form-item>

                            <!--          作业所教班级-->
                            <el-form-item prop="classes"
                                          class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <div>
                                  <el-button @click="join">添加专业班级</el-button>
                                  <div>
                                    <span v-show="ruleForm.classesData.length !== 0">请输入将完成作业的班级，例：214，或214-215</span>
                                  </div>

                                </div>
                                <div v-show="ruleForm.classesData.length !== 0"
                                     style="margin-top: 10px"
                                     v-for="(data,index) in ruleForm.classesData">
                                  <el-select v-model="data.specialized"
                                             filterable
                                             style="width: 50%;float: left"
                                             placeholder="请选择课程教学对应专业">
                                    <el-option
                                        v-for="item in specialized"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item">
                                    </el-option>
                                  </el-select>
                                  <el-input
                                      type="text"
                                      style="margin-left: 5%;width: 23%;float: left"
                                      placeholder="输入班级"
                                      v-model="data.classes"
                                      autocomplete="off"
                                  ></el-input>
                                  <el-button style="width: 17%;float: left;margin-left: 5%"
                                             @click="deleteData(index)"
                                  >删除
                                  </el-button>
                                  <div style="clear:both;"></div>
                                </div>


                              </div>
                            </el-form-item>

                            <!--        作业内容-->
                            <el-form-item prop="context" class="rule-form-input-item">
                              <div class="rule-form-input-div">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 10}"
                                    placeholder="请输入作业内容要求"
                                    v-model="ruleForm.context">
                                </el-input>
                              </div>
                            </el-form-item>
                            <el-button
                                class="btn"
                                type="primary"
                                @click="submitForm('ruleForm')"
                            >
                              <span>完成</span>
                            </el-button>

                          </el-form>
                        </div>
                        <!--      查看/批阅学生作业-->
                        <div class="content-container1" v-if="showViewHomeworkPage">
                          <div class="studetail-zone">
                            <div style="margin: 0 20px">
                              <div style="height: 40px">
                                <el-button style="float: left;margin-bottom: 20px"
                                           @click="showViewHomeworkPage = false">返回
                                </el-button>
                                <span style="float: left;margin-left: 40px;font-size: 18px;margin-top: 5px"
                                >得分：</span>
                                <el-input-number v-model="updateStuHomework.score"
                                                 style="float: left;margin-left: 10px"
                                                 @change="handleChange"
                                                 :min="0" :max="100"></el-input-number>
                                <el-button type="primary"
                                           style="margin-left: 20px"
                                           @click="save">保存</el-button>
                              </div>
                              <el-input
                                  style="margin-top: 10px;"
                                  type="textarea"
                                  :autosize="{ minRows: 2, maxRows: 3}"
                                  placeholder="请输入作业评价"
                                  v-model="updateStuHomework.remarks">
                              </el-input>
                            </div>
                            <div>
                              <p class="stuwork_subnav stuwork_gap">
                                {{ studentHomeworkName }}的作业
                                <span class="time">{{ createTime }}</span>
                              </p>
                              <div class="stuworkdetails-zone stuwork_detail">
                                <div class="file-wrap" v-show="data.context !== ''">
                                  {{ data.context }}
                                </div>
                                <div class="file-wrap" v-show="stuData.length !== 0">
                                 <span class="title1">
                                    <i class="iconfont icon-fujian"></i>
                                    附件
                                    </span>
                                  <div class="attach-previtem"
                                       @mouseleave="mouseleave()"
                                       @mouseover="mouseover()"
                                       v-for="item in stuData">
                                    <div>
                                      <div class="file-attachwarp canPreview">
                                        <div class="file-info">
                                          <div class="file-filetype fileicon_image">
                                            <div class="image-wrap">
                                              <div v-show="item.type === 'docx' || item.type === 'doc'"
                                                   class="file-filetype iconfont icon-word1"></div>
                                              <img v-if="item.type === 'jpg' || item.type === 'png' || item.type === 'jpeg'"
                                                   alt="" :src="`/api/student/download?name=${item.annex}`"/>
                                            </div>
                                          </div>
                                          <div class="file-attachmain">
                                            <p style="margin-top: 0;margin-bottom: 8px">{{ item.name }}</p>
                                            <p style="margin-top: 0">{{ item.size }}MB</p>
                                          </div>
                                          <div class="file-action"
                                               :style="cDisplay">
                                            <span class="preview" @click="previewMy(item.annex,item.type,item.name)">预览</span>
                                            <a style="color: #8d77fb"
                                               :href="imageHref"
                                               :download="item.name"
                                               @click="downlink(item.annex)">下载</a>

                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
              </div>

            </div>
          </div>


          <div>

          </div>

        </div>
      </div>

    </div>


    <!--    作业word文档浏览-->
    <el-dialog class="el-dialog__wrapper previewDialog filePreviewDialog"
               :visible.sync="showIframe"
               style="background-color: rgb(0, 0, 0); z-index: 2007;">
      <div class="viewfile-wrap">
        <div class="viewfile-zone">
          <div ref="word"></div>
        </div>
      </div>
    </el-dialog>

    <!--      图片浏览作业提交后附件浏览-->
    <el-dialog class="el-dialog__wrapper previewDialog filePreviewDialog"
               :visible.sync="showImage"
               :title="dialogTitleName"
               style="background-color: rgb(0, 0, 0); z-index: 2005">
      <div class="img-zone">
        <img alt="" :src="imageSrc"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HomeworkHeader from '@/components/headers/HomeworkHeader'
import {homeworkTeaGet} from "@/apis/teacher";
import {toGetHomeworkByTea} from "@/apis/teacher";
import {toGetWorkBenchInfoTea} from "@/apis/teacher";
import HomeworkSubmit from '@/views/statistics/component/homeworkSubmitStatistics'
import HomeworkShared from '@/views/statistics/component/sharedHomeworkStatistics'
import HomeworkMark from '@/views/statistics/component/homeworkMarkStatistics'
import TodaySubmit from '@/views/statistics/component/todaySubmitStatistics'
import JoinClassHeader from '@/components/headers/JoinClassHeader'
import {allSpecializedName} from "@/apis/teacher";
import {toGetClassesAndSpecializedTogether} from "@/utils/data";
import {toChangeHomework} from "@/apis/teacher";
import {homeworkTeaGetDetail} from "@/apis/teacher";
import {homeworkStuGet} from "@/apis/student";
import {stuPreviewShow} from "@/apis/student";
import {toUpdateStuHomework} from "@/apis/teacher";

const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
  components: {
    HomeworkHeader,
    HomeworkSubmit,
    HomeworkMark,
    HomeworkShared,
    TodaySubmit,
    JoinClassHeader,
  },
  props: {},
  data() {
    return {
      item: {},
      tea: [],
      ifWrite: false,
      homework: {},
      finished: 1,

      type: '',
      isActive: 1,

      loading: true,

      workbenchInfo: [], // 工作台信息
      homeworkSubmitData: [],
      homeworkSharedData: [],
      homeworkMarkData: [],
      todaySubmitData: [],

      studentHomeworkName: '',

      showAddHomeworkPage: false,
      showViewHomeworkPage: false,

      tableData: [],
      pagination: {
        courseId: '',
        pageSize: 10,
        page: 1,
        title: '',
        status: 3,
        counts: 0,
        id: '',
      },
      requestData: {},
      value: '',

      updateStuHomework: {
        homeworkId: '',
        studentId:  '',
        remarks: '',
        score: 0,
      },

      dialogTitleName:  '',
      ifContext: true,
      cDisplay: 'display: none',
      showIframe: false,
      showImage: false,
      src: '',
      annex: '',
      imageSrc: '',
      imageHref: '',
      stuData: [],
      data: [],
      createTime: '',


      ruleForm: {
        courseId: '',
        teacherId: '',
        name: '',
        startTime: '',
        endTime: '',
        context: '',
        ifAnnounced: 1,
        ifUpload: 1,
        ifCopy: 1,
        evaluation: 'teacher',
        classesData: [],
      },
      specialized: [],
      rules: {
        name: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
          {type: 'string', max: 10, message: "信息过长", trigger: 'blur'}
        ],
        context: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
        ],
        evaluation: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
        ],

      },
    }
  },
  created() {

    this.init()
  },

  methods: {
    async init() {
      this.closeLoading(1500)

      this.item = JSON.parse(this.$route.query.item);
      this.tea = JSON.parse(this.$route.query.tea)

      this.pagination.title = this.tea.name
      this.pagination.id = localStorage.getItem("id")
      this.pagination.courseId = this.item.id

      this.requestData = {
        courseId: this.item.id,
        name: this.tea.name,
        creator: this.tea.creator,
      }

      // 获取老师布置作业详情信息
      this.teaGet()
      // 获取所有学生的作业信息
      this.toGetHomework()
      // 获取工作台需要的信息
      this.toGetWorkBenchInfo()
      // 获取所有专业名称
      allSpecializedName().then(resp => {
        if (resp?.data?.code === 1) {
          this.specialized = resp?.data?.data
        }
      })
      // 将传来的列表参数tea经处理后交给表单
      this.ruleForm = toGetClassesAndSpecializedTogether(this.tea)
    },

    // 添加专业班级
    join() {
      this.ruleForm.classesData.push({'specialized': '', 'classes': ''}) // JSON.parse(JSON.stringify(this.dishFlavorsData))
    },
    // 按钮 - 删除口味
    deleteData(ind) {
      this.ruleForm.classesData.splice(ind, 1)
    },

    // 保存批阅学生作业信息
    save(){
      this.updateStuHomework.homeworkId = this.homework.id

      toUpdateStuHomework(this.updateStuHomework).then(resp =>{
          if(resp?.data?.code === 1){
            this.$message.success("批阅成功")

            this.showViewHomeworkPage = false
            // 获取老师布置作业详情信息
            this.teaGet()
            this.homeworkSubmitData = []
            // 获取所有学生的作业信息
            this.toGetHomework()
            // 获取工作台需要的信息
            this.toGetWorkBenchInfo()
            this.homeworkMarkData = []
            this.homeworkSharedData = []
            this.todaySubmitData = []
          }else{
            this.$message.error(resp?.data?.msg)
          }
      })

    },

    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 获取老师id和课程id
          this.ruleForm.teacherId = localStorage.getItem("id")
          this.ruleForm.courseId = this.item.id
          toChangeHomework(this.ruleForm).then(resp => {
            if (resp?.data?.code === 1) {
              this.$message.success("修改成功")

              this.showAddHomeworkPage = false

              homeworkTeaGetDetail(this.requestData).then(resp => {
                if (resp?.data?.code === 1) {
                  console.log(resp?.data?.data)
                  this.$router.replace({
                    query: {
                      item: JSON.stringify(this.item),
                      tea: JSON.stringify(resp?.data?.data)
                    }
                  })

                } else {
                  this.$message.error(resp?.data?.msg)
                }
              })
            } else {
              this.$message.error(resp?.data?.msg)
            }
          })

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取工作台需要的信息
    toGetWorkBenchInfo() {
      toGetWorkBenchInfoTea(this.requestData).then(resp => {
        if (resp?.data?.code === 1) {
          this.workbenchInfo = resp?.data?.data

          // 初始化数据总览中的数据  作业批阅-未批阅
          this.homeworkMarkData.push(
              {value: this.workbenchInfo.marked, name: '已批阅'},
              {value: this.workbenchInfo.marking, name: '待批阅'},
          )
          // 初始化数据总览中的数据  柱状图 ：提交 未提交 共享作业 总人数
          this.homeworkSharedData.push(
              this.homework.total,
              this.workbenchInfo.marked + this.workbenchInfo.marking,
              this.workbenchInfo.notSubmit,
              this.workbenchInfo.shared
          )

          // 初始化数据总览中的数据  折线图：今日数据
          this.todaySubmitData.push(
              this.workbenchInfo.submitThreeBefore,
              this.workbenchInfo.submitTwoDay,
              this.workbenchInfo.submitToday,
          )

        } else {
          this.$message.error(resp?.data?.msg)
        }
      })


    },
    // 获取所有学生的作业信息
    toGetHomework() {
      // 发起请求
      toGetHomeworkByTea(this.pagination).then(resp => {
        if (resp?.data?.code === 1) {

          this.pagination.counts = resp?.data?.data?.total
          this.tableData = resp?.data?.data?.records
        }
      })
    },
    // 获取所有学生的作业信息--》根据状态值
    toGetHomeworkBy(status) {
      this.pagination.status = status
      this.toGetHomework()
    },

    // 获取老师布置作业详情信息
    teaGet() {

      homeworkTeaGet(this.requestData).then(resp => {
        if (resp?.data?.code === 1) {
          this.homework = resp?.data?.data
          console.log(this.homework)
          // 初始化数据总览中的数据  提交-未提交
          this.homeworkSubmitData.push(
              {value: this.homework.total - this.homework.completed, name: '未提交人数'},
              {value: this.homework.completed, name: '提交人数'},
          )
        } else {
          this.$message.error(resp?.data?.msg)
        }
      })
    },

    // 查看学生作业
    view(studentId, name) {
      this.loading = true
      this.closeLoading(1500)

      // 获取学生作业信息
      let table = {
        name: this.tea.name,
        creator: this.tea.creator,
        courseId: this.item.id,
        studentId: studentId
      }
      // 获取学生作业信息
      homeworkStuGet(table).then(resp => {
        if (resp?.data?.code === 1) {
          // 获取作业状态
          this.finished = resp?.data?.data?.finished
          // 赋值
          this.stuData = resp?.data?.data?.files
          this.data = resp?.data?.data
          this.createTime = resp?.data?.data?.createTime
          this.updateStuHomework.remarks = resp?.data?.data?.remarks
          this.updateStuHomework.score = resp?.data?.data?.score

          this.showViewHomeworkPage = true
          this.studentHomeworkName = name

          this.updateStuHomework.studentId = studentId


        }
      })
    },

    // 预览我的作业
    previewMy(annex, type, name) {
      if (type === 'docx' || type === 'doc') {
        this.showIframe = true
        stuPreviewShow(annex).then(({data}) => {
          docx.renderAsync(data, this.$refs.word)
        })
      } else if (type === 'jpg' || type === 'jpeg' || type === 'png') {
        this.showImage = true
        this.imageSrc = `/api/student/download?name=${annex}`
        this.dialogTitleName = name
      }

    },
    // 下载
    downlink(annex) {
      this.imageHref = './download_doc/doc/' + annex
      console.log(this.imageHref)
    },
    // 鼠标悬浮切换
    mouseover() {
      this.cDisplay = 'display: block '
    },
    mouseleave() {
      this.cDisplay = 'display: none '
    },
    // 切换到修改作业页面
    toHomeworkPage(code) {
      this.showAddHomeworkPage = true
      this.loading = true
      this.closeLoading(1000)
    },
    // 计数器
    handleChange(value) {
      console.log(value);
    },
    // 分页菜单页码的改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.init()
    },
    // 切换页面
    change(i) {
      this.isActive = i
    },
    // 加载动画
    closeLoading(time) {
      this.timer = null
      this.timer = setTimeout(() => {
        this.loading = false
      }, time)
    },
  }
}
</script>

<style scoped>

.divTmp {
  width: 100%;
}

::v-deep .el-loading-mask {
  transition: opacity 0s;
}

::v-deep .el-loading-spinner {
  top: 100%;
  margin-top: 30%;
  width: 100%;
  text-align: center;
  position: absolute;
}

div {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  unicode-bidi: isolate;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.content-container {
  width: 1450px !important;
  position: relative;
  margin: 0 auto 0;
  background: #fff;
}


.teadetail-zone0 {
  width: 1450px;
  margin: 20px auto 0;
  font-size: 14px;
  background-color: #fff;
  border-top: 8px solid #ea5947;
  border-radius: 4px;
  border-bottom: none;
  padding-bottom: 8px;
}

.workbench {
  position: relative;
}

.divider {
  margin: 6px 20px;
  border-bottom: 1px solid #e3e3e9;
}

.workbench1 {
  margin: 30px 50px 0 50px;
  position: relative;
}

.workbench2 {
  margin: 0 50px 30px 50px;
  position: relative;

}

.workbench-style {
  position: relative;
  width: 880px;
  height: 110px;
  margin-left: 5%;
}

.workbench-style2 {
  float: left;
  position: relative;
  width: 440px;
  height: 135px;
  margin-left: 5%;
}

.workbench-style3 {
  float: left;
  position: relative;
  width: 440px;
  height: 135px;
  margin-left: 0;
}

#marking:hover {
  color: #409EFF;
}

.workbench-item {
  border: 1px #969696 solid;
  border-radius: 10px;
  margin: 10px 10px;
  position: relative;
  float: left;
  width: 200px;
  height: 100px;
}

.workbench-item div {
  width: 100%;
}

.numbers {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 30px;
}

.numbers2 {
  text-align: center;
  margin-top: 20px;
  font-size: 30px;
}

.tip {
  margin-top: 10px;
  margin-left: 10px;
}

.tip2 {
  margin-top: 10px;
  text-align: center;
}

.title {
  padding-left: 10px;
  font-size: 17px;
  color: #444444;
}

.title-item {
  width: 40%;
}


.course-cover {
  padding: 0 0 56.25%;
  position: relative;
}

.course-body {
  padding-top: 28px;
  background-color: #fff;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  min-height: 100vh;
  width: 1370px !important;
  min-width: 980px;
}

.course-nav-menu {
  border-right: 1px solid #e3e3e9;
  width: 228px;
  display: inline-block;
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 48px);
}

.course-content-area {
  margin-left: -228px;
  padding: 24px 0 0 260px;
  width: 100%;
  min-height: 835px;
}

.full-height {
  height: 100%;
}

.tab-link {
  padding-left: 30px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  font-size: 16px;
  line-height: 44px;
  color: #444;
}

.tab-link:hover {
  background-color: rgba(239, 239, 247, .7);
}


.active {
  color: #7691fc;
  border-left: 4px solid #7691fc;
  padding-left: 26px;
}

.iactive {
  color: #7691fc;
}


.homework-stu-manage {
  margin: 0 50px 30px 50px;;
}


.add-homework {
  margin-right: 10px !important;
}

.title-button {
  border: 1px #409EFF solid !important;
  background-color: #409EFF !important;
  color: #ffffff !important;
}

.title-button:hover {
  background-color: #56b5f5 !important;
}

.button {
  border-radius: 100px;
  margin: 0;
  border: 1px #969696 solid;
  background-color: white;
  color: #969696;
}

.button:hover {
  color: black;
  border: 1px #409EFF solid;
}


.pagination-container {
  margin: 12px auto;
  padding-top: 10px;
  text-align: center;
}

::v-deep .el-table__empty-block {
  width: 100% !important;
}


.table-button {
  color: #969696;
  min-width: 40px;
  margin-left: 10px !important;
}

.breadcrumb-item {
  font-size: 17px;
}

.change:hover {
  color: #409EFF;
}

.view-body {
  padding: 0 32px;
  background-color: #fff;
}

.container {
  width: 800px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.page-tip {
  background: #fdf6ec;
  border-radius: 14px;
  padding: 10px;
  margin: 20px 0 30px;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}


.page-title {
  font-size: 18px;
  font-weight: 700;
}

.rule-form {
  width: 420px;
  margin: 30px auto;
  display: block;
}

.rule-from-input-items {
}

.rule-form-input-item {
  margin-bottom: 22px;
}

.rule-form-input-div {
  line-height: 44px;
  display: inline-block;
  font-size: 14px;
  position: relative;
  width: 100%;
}


button,
select {
  text-transform: none;
}

.btn {
  margin-top: 18px;
  width: 100%;
  padding: 14px 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background-color: #ea5947;
  border-color: #ea5947;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: 0.1s;
  font-weight: 400;
  -webkit-user-select: none;
  font-size: 14px;
  border-radius: 4px;
  min-width: 88px;
}

.flavorBox .flavor .cont .items .itTit input {
  width: 100%;
  line-height: 40px;
  border-radius: 3px;
  padding: 0 10px;
}

.flavorBox .flavor .cont .items .labItems span {
  display: inline-block;
  color: #f19c59;
  margin: 5px;
  line-height: 26px;
  height: 26px;
  padding: 0 10px;
  background: #fdf4eb;
  border-radius: 3px;
  border: solid 1px #fae2cd;
}

.flavorBox .flavor .cont .items .labItems span i {
  cursor: pointer;
  font-style: normal;
}

.content-container1 {
  width: 1020px !important;
  position: relative;
  margin: 20px auto 0;
  background: #fff;
}

.studetail-zone {
  width: 1020px;
  font-size: 14px;
  background-color: #fff;
  border-bottom: none;
  padding-bottom: 8px;
}

.time {
  float: right;
  font-size: 14px;
  line-height: 1;
  color: #969696;
}


.evaluate-result span {
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
  vertical-align: middle;
}

.stuwork_subnav {
  margin-bottom: 0;
  border-left: 3px solid #ea5947;
  font-size: 16px;
  line-height: 1;
  color: #ea5947;
  padding: 4px 16px;
}

.stuwork_detail {
  padding: 10px 20px;
  font-size: 14px;
  color: #444;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  -webkit-user-select: auto;
}

.file-wrap {
  background: #f3f3f3;
  padding: 14px 16px;
}

.title1 {
  font-weight: bold;
  font-size: 18px;
  color: #444;
  letter-spacing: 0;
}

.iconfont {
  margin-right: 6px;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.attach-previtem {
  margin-top: 10px;
}

.file-attachwarp {
  border: 0;
  padding: 10px 0;
  zoom: 1;
  border-radius: 4px;
  cursor: pointer;
}

.file-info {
  cursor: pointer;
  overflow: hidden;
}

.file-filetype {
  font-size: 37px;
  float: left;
  margin-right: 10px;
  color: #529fff;
  display: inline-block;
}

.file-attachmain {
  padding-right: 20px;
  float: left;
  max-width: 400px;
}

.file-action {
  float: left;
  font-size: 12px;
  color: #8d77fb;
  position: relative;
  line-height: 22px;
}


.file-action span {
  margin-right: 10px;

}

.image-wrap {
  width: 42px;
  height: 42px;
  line-height: 52px;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  background-size: 100% 100%;
}



::v-deep .el-dialog {
  margin-top: 5vh !important;
  width: 100%;
  position: relative;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

::v-deep .el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
}


::v-deep .el-dialog__body {
  color: #606266;
  line-height: 24px;
  font-size: 14px;
  padding: 30px 20px;
}
</style>